<template>
  <div class="content-detail">
    <el-card class="card-box minh100">
      <template #header>
        <div class="card-box-header">
          <span>项目基本信息</span>
        </div>
      </template>
      <el-collapse-transition>
        <div>
          <el-form
            :model="basicInfoData"
            class="content-box"
            :rules="rules"
            ref="formDataRef"
            label-width="160px"
          >
            <el-form-item label="项目名称">
              <span class="text--info form-detail">{{
                basicInfoData?.projectName
              }}</span>
            </el-form-item>
            <el-form-item label="项目编号">
              <span class="text--info form-detail">{{
                basicInfoData?.projectCode
              }}</span>
            </el-form-item>
            <el-form-item label="项目类型">
              <span class="text--info form-detail">{{
                basicInfoData?.projectTypeName
              }}</span>
            </el-form-item>
            <el-form-item label="项目性质" v-if="isTypeB">
              <span class="text--info form-detail">{{
                basicInfoData?.projectNatureName
              }}</span>
            </el-form-item>
            <el-form-item label="投资方向" v-if="isTypeB">
              <span class="text--info form-detail">{{
                basicInfoData?.investmentTypeName
              }}</span>
            </el-form-item>
            <el-form-item label="项目批准金额(万元)">
              <span class="text--info form-detail">{{
                basicInfoData?.approvalAmount
              }}</span>
            </el-form-item>
            <el-form-item label="立项需求批准日期" v-if="isTypeB">
              <span class="text--info form-detail">{{
                basicInfoData?.approvalDate
              }}</span>
            </el-form-item>
            <el-form-item label="立项批准日期">
              <span class="text--info form-detail">{{
                basicInfoData?.approvalTime
              }}</span>
            </el-form-item>
            <el-form-item label="项目预计完成日期" v-if="isTypeB">
              <span class="text--info form-detail">{{
                basicInfoData?.planCompletionDate
              }}</span>
            </el-form-item>
            <el-form-item label="项目所属工厂">
              <span class="text--info form-detail">{{
                basicInfoData?.projectFactoryName
              }}</span>
            </el-form-item>
            <el-form-item label="项目管理员">
              <span class="text--info form-detail">{{
                basicInfoData?.projectLeaderName
              }}</span>
            </el-form-item>
            <el-form-item label="项目年度" prop="projectYear">
              <span class="text--info form-detail"
                >{{ basicInfoData?.projectYear }}年</span
              >
            </el-form-item>
            <el-form-item label="审批附件" v-if="false"></el-form-item>
            <div class="field-group-box" v-if="false">
              <el-form-item label="立项需求表及附件">
                <ecm-upload
                  hideText
                  disabled
                  :docid="docid"
                  :files="basicInfoData?.requireAttachments || []"
                ></ecm-upload>
              </el-form-item>
              <el-form-item label="立项审批表及附件">
                <ecm-upload
                  hideText
                  disabled
                  :docid="docid"
                  :files="basicInfoData?.approvalAttachments || []"
                ></ecm-upload>
              </el-form-item>
              <el-form-item label="其他文件">
                <ecm-upload
                  hideText
                  disabled
                  :files="basicInfoData?.otherAttachments || []"
                ></ecm-upload>
              </el-form-item>
            </div>
            <el-form-item label="项目描述" prop="remarks">
              <el-input
                type="textarea"
                v-model.trim="basicInfoData.remarks"
                v-if="basicInfoData.remarks"
                :rows="3"
                disabled
              ></el-input>
              <span v-else class="text--info form-detail">-</span>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { storageLocal } from "/@/utils/storage";
import { getProjectInfo } from "/@/api/projects";
import ecmUpload from "/@/components/ecmUpload/index.vue";

let basicInfoData = ref<object>({
  // projectCode: "项目编码code101",
  // projectLeaderId: "22",
  // projectLeaderName: "潘涛测试账号",
  // projectName: "A项目101",
  // projectTmpId: 1,
  // projectTypeCode: "B",
  // projectTypeName: "B类设备",
  // projectFactoryCode: "",
  // projectFactoryName: "",
  // projectYear: "2022",
  // remarks: "备注。。。"
}); // 信息

const docid = window["ecmDocType"].project;

const isTypeB = computed(() => {
  return basicInfoData.value.projectTypeCode === 'B0';
})
// 请求详情信息
const getDatailData = async () => {
  const id = storageLocal.getItem("projectInfo")?.id;
  if (!id) {
    return;
  }
  const params = {
    id: id
  };
  const { code, data } = await getProjectInfo(params);
  if (code === 200) {
    /*
     * warning：
     * const { acceptanceRecordList } = data;
     * 当进行解构时，会失去响应，导致子组件不能接收到数据
     * 可使用以下方法进行解决
     * const accept = toRef(data, "acceptanceRecordList");
     */
    basicInfoData.value = data;
    basicInfoData.value.requireAttachments = JSON.parse(data.requireAttachments || `[]`);
    basicInfoData.value.approvalAttachments = JSON.parse(data.approvalAttachments || `[]`);
    basicInfoData.value.otherAttachments = JSON.parse(data.otherAttachments || `[]`);
  }
};

getDatailData();
</script>

<style lang="scss" scoped>
  .field-group-box {
    border: 1px dashed;
    margin-bottom: 12px;
    padding-top: 12px;
    :deep {
      .el-upload {
        display: none;
      }
    }
  }
</style>
